import React, { Component } from 'react';
import { connect } from 'dva';
import { message, Modal, Button, Steps, Icon, Menu, Dropdown, Progress, Tooltip } from 'antd';
import styles from '../Users.css';
import Factory from '../../factory';
import dataEditCreate from '../../addons/DataEdit'
import dataTableCreate from '../../addons/DataTable'
import dataImportCreate from '../../addons/DataImport'
import * as datetime from '../../../utils/datetime'
import xlsxTmp from '../../../assets/申请公司客户变更.xlsx'
import * as compDiviService from '../../../services/AccountDivi';
const daoName = "CompClieDiviFlow2App";
const ButtonGroup = Button.Group;
const renderStep = (data) => {
    const { progress, status } = data
    const percent = Math.round(progress)
    return <Progress percent={percent} size="small" status={status === "" ? "normal" : status} />
};
let columns = [
    { title: "当前进度", key: "StepName", render: data => renderStep(data), width: 160, dispaly: true },
    { title: '申请人', dataIndex: 'SQR', key: 'SQR', width: 120, sorter: true, dispaly: true, filter: true, export: true },

    { title: '申请时间', key: 'CREATETIME', render: data => datetime.format(data.CREATETIME, "yyyy-MM-dd"), width: 120, sorter: true, dispaly: true, filter: true, export: false },

    { title: '客户名称', dataIndex: 'CUNM', key: 'CUNM', width: 180, sorter: true, dispaly: true, filter: true, export: true },
    { title: '开户网点', dataIndex: 'OrganName', key: 'OrganName', width: 120, sorter: true, dispaly: true, filter: true, export: true },

    { title: '科目', dataIndex: 'ITNM', key: 'ITNM', width: 220, sorter: true, dispaly: true, filter: true, export: false },
    { title: '账号', dataIndex: 'ACNO', key: 'ACNO', width: 220, sorter: true, dispaly: true, filter: true, export: true },
    { title: '子账号', dataIndex: 'BANO', key: 'BANO', width: 220, sorter: true, dispaly: true, filter: true, export: true },
    { title: '变更日期', key: 'DSDT', caption: "DSDT", render: data => datetime.format(data.DSDT, "yyyy-MM-dd"), width: 110, sorter: true, dispaly: true, export: true },
    { title: '调户说明', dataIndex: 'THSM', key: 'THSM', width: 220, sorter: true, dispaly: true, filter: true, export: true },
    { title: '员工号1', dataIndex: 'EMNO1', key: 'EMNO1', width: 110, sorter: true, dispaly: true, filter: true, export: true },
    { title: '员工名称1', dataIndex: 'emnm1', width: 110, dispaly: true, export: true },
    { title: '占比1(%)', dataIndex: 'DSVL1', key: 'DSVL1', width: 120, sorter: true, dispaly: true, export: true },
    { title: '员工号2', dataIndex: 'EMNO2', key: 'EMNO2', width: 110, sorter: true, dispaly: true, filter: true, export: true },
    { title: '员工名称2', dataIndex: 'emnm2', width: 110, dispaly: true, export: true },
    { title: '占比2(%)', dataIndex: 'DSVL2', key: 'DSVL2', width: 120, sorter: true, dispaly: true, export: true },
    { title: '员工号3', dataIndex: 'EMNO3', key: 'EMNO3', width: 110, sorter: true, dispaly: true, filter: true, export: true },
    { title: '员工名称3', dataIndex: 'emnm3', width: 110, dispaly: true, export: true },
    { title: '占比3(%)', dataIndex: 'DSVL3', key: 'DSVL3', width: 120, sorter: true, dispaly: true, export: true },
    { title: '员工号4', dataIndex: 'EMNO4', key: 'EMNO4', width: 110, sorter: true, dispaly: true, filter: true, export: true },
    { title: '员工名称4', dataIndex: 'emnm4', width: 110, dispaly: true, export: true },
    { title: '占比4(%)', dataIndex: 'DSVL4', key: 'DSVL4', width: 120, sorter: true, dispaly: true, export: true },
    { title: '员工号5', dataIndex: 'EMNO5', key: 'EMNO5', width: 110, sorter: true, dispaly: true, filter: true, export: true },
    { title: '员工名称5', dataIndex: 'emnm5', width: 110, dispaly: true, export: true },
    { title: '占比5(%)', dataIndex: 'DSVL5', key: 'DSVL5', width: 120, sorter: true, dispaly: true, export: true },
];
const columns2 = [
    { title: '客户名称', dataIndex: 'CUNM', key: 'CUNM', width: 220, sorter: true, dispaly: true, filter: true },
    { title: '开户网点', dataIndex: 'OrganName', key: 'OrganName', width: 130, sorter: true, dispaly: true, filter: true },

    { title: '科目', dataIndex: 'ITNM', key: 'ITNM', width: 180, sorter: true, dispaly: true, filter: true },
    { title: '账号', dataIndex: 'ACNO', key: 'ACNO', width: 220, sorter: true, dispaly: true, filter: true },
    { title: '子账号', dataIndex: 'BANO', key: 'BANO', width: 120, sorter: true, dispaly: true, filter: true },
    { title: '开户日期', key: 'OPDT', render: data => datetime.format(data.OPDT, "yyyy-MM-dd"), width: 100, sorter: true, dispaly: true, filter: true },
]
let controlsFilter = [
    { name: 'SQR', required: true, type: 'text', label: '申请人', dataType: "string", grid: 12 / 24 },

    { name: 'CUNM', required: true, type: 'text', label: '客户名称', dataType: "string", grid: 12 / 24 },
    { name: 'OrganName', required: true, type: 'text', label: '开户网点', dataType: "string", grid: 12 / 24 },

    { name: 'ITNM', required: true, type: 'text', label: '科目', dataType: "string", grid: 12 / 24 },
    { name: 'ACNO', required: true, type: 'text', label: '账号', dataType: "string", grid: 12 / 24 },
    { name: 'BANO', required: true, type: 'text', label: '子账号', dataType: "string", grid: 12 / 24 },
    { name: 'EMNO1', required: true, type: 'text', label: '员工号1', dataType: "string", grid: 12 / 24 },
    { name: 'EMNO2', required: true, type: 'text', label: '员工号2', dataType: "string", grid: 12 / 24 },
    { name: 'EMNO3', required: true, type: 'text', label: '员工号3', dataType: "string", grid: 12 / 24 },
    { name: 'EMNO4', required: true, type: 'text', label: '员工号4', dataType: "string", grid: 12 / 24 },
    { name: 'EMNO5', required: true, type: 'text', label: '员工号5', dataType: "string", grid: 12 / 24 },
    { name: 'THSM', required: true, type: 'text', label: '调户说明', dataType: "string", grid: 12 / 24 },
    { name: 'CREATETIME', required: true, type: 'date', label: '申请时间', dataType: "date", grid: 12 / 24 },
    { name: 'UPDATETIME', required: false, type: 'text', label: '完结时间', dataType: "string", grid: 12 / 24 },
]
let controls3 = [
    { name: 'CUNM', required: true, type: 'text', label: '客户名称', dataType: "string", grid: 12 / 24 },
    { name: 'OrganName', required: true, type: 'text', label: '开户网点', dataType: "string", grid: 12 / 24 },

    { name: 'ITNM', required: true, type: 'text', label: '科目', dataType: "string", grid: 12 / 24 },
    { name: 'ACNO', required: true, type: 'text', label: '账号', dataType: "string", grid: 12 / 24 },
    { name: 'BANO', required: true, type: 'text', label: '子账号', dataType: "string", grid: 12 / 24 },
    { name: 'OPDT', required: true, type: 'date', label: '开户日期', dataType: "date", grid: 12 / 24 },

]
const controls = [
    {
        name: 'EMNO1', required: true, type: 'disabled', label: '员工1', dataType: "string", grid: 12 / 24,
    },
    { name: 'DSVL1', required: true, type: 'number', dataType: "number", label: '占比1(%)', min: 0, max: 100, grid: 12 / 24 },
    {
        name: "EMNO2", label: "员工2", type: "search", grid: 12 / 24,
        fetch: {
            daoName: "UserSel", searchColumns: ['No', 'Name'], optionTpl: 'Name', valueTpl: "No"
        },
        dataType: "string", placeholder: '请输入工号或名称...'
    },
    { name: 'DSVL2', type: 'number', dataType: "number", label: '占比2(%)', min: 0, max: 100, grid: 12 / 24 },
    {
        name: "EMNO3", label: "员工3", type: "search", grid: 12 / 24,
        fetch: {
            daoName: "UserSel", searchColumns: ['No', 'Name'], optionTpl: 'Name', valueTpl: "No"
        },
        dataType: "string", placeholder: '请输入工号或名称...'
    },
    { name: 'DSVL3', type: 'number', dataType: "number", label: '占比3(%)', min: 0, max: 100, grid: 12 / 24 },
    {
        name: "EMNO4", label: "员工4", type: "search", grid: 12 / 24,
        fetch: {
            daoName: "UserSel", searchColumns: ['No', 'Name'], optionTpl: 'Name', valueTpl: "No"
        },
        dataType: "string", placeholder: '请输入工号或名称...'
    },
    { name: 'DSVL4', type: 'number', dataType: "number", label: '占比4(%)', min: 0, max: 100, grid: 12 / 24 },
    {
        name: "EMNO5", label: "员工5", type: "search", grid: 12 / 24,
        fetch: {
            daoName: "UserSel", searchColumns: ['No', 'Name'], optionTpl: 'Name', valueTpl: "No"
        },
        dataType: "string", placeholder: '请输入工号或名称...'
    },
    { name: 'DSVL5', type: 'number', dataType: "number", label: '占比5(%)', min: 0, max: 100, grid: 12 / 24 },
    { name: 'DSDT', type: 'date', dataType: "date", label: '变更日期', grid: 12 / 24, required: true },
    {
        name: "KHLX", label: "客户类型", required: true,
        data: [{ value: '1', label: '大公司客户' }, { value: '2', label: '普惠客户' }],
        grid: 12 / 24, type: "select"
    },
    { name: 'THSM', required: true, type: 'text', label: '调户说明', dataType: "string", grid: 24 / 24, layout: { labelSpan: 3, wrapperSpan: 20 } },

]
let controlsImp = [
    { name: 'CUNM', required: true, type: 'text', label: '客户名称', dataType: "string", grid: 12 / 24 },
    // { name: 'ITNM', required: true, type: 'text', label: '科目', dataType: "string", grid: 12 / 24 },
    { name: 'ACNO', required: true, type: 'text', label: '账号', dataType: "string", grid: 12 / 24 },
    { name: 'BANO', required: true, type: 'text', label: '子账号', dataType: "string", grid: 12 / 24 },
    { name: 'EMNO1', required: true, type: 'text', label: '员工1', dataType: "string", grid: 12 / 24 },
    { name: 'DSVL1', required: true, type: 'number', label: '占比1(%)', dataType: "number", grid: 12 / 24 },
    { name: 'EMNO2', required: false, type: 'text', label: '员工2', dataType: "string", grid: 12 / 24 },
    { name: 'DSVL2', required: false, type: 'number', label: '占比2(%)', dataType: "number", grid: 12 / 24 },
    { name: 'EMNO3', required: false, type: 'text', label: '员工3', dataType: "string", grid: 12 / 24 },
    { name: 'DSVL3', required: false, type: 'number', label: '占比3(%)', dataType: "number", grid: 12 / 24 },
    { name: 'EMNO4', required: false, type: 'text', label: '员工4', dataType: "string", grid: 12 / 24 },
    { name: 'DSVL4', required: false, type: 'number', label: '占比4(%)', dataType: "number", grid: 12 / 24 },
    { name: 'EMNO5', required: false, type: 'text', label: '员工5', dataType: "string", grid: 12 / 24 },
    { name: 'DSVL5', required: false, type: 'number', label: '占比5(%)', dataType: "number", grid: 12 / 24 },
    { name: 'DSDT', required: true, type: 'date', label: '变更日期', dataType: "date", grid: 12 / 24 },
    { name: 'THSM', required: true, type: 'text', label: '调户说明', dataType: "string", grid: 12 / 24 },

];
const EditFrom = dataEditCreate(daoName);
const DataTable = dataTableCreate(daoName);
const DataImport = dataImportCreate(daoName);
const DataTable2 = dataTableCreate("CompAccoFlow");
const Step = Steps.Step

class CompClieDiviFlow2App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataChange: false,
            range: "firstdoing",
            stepTitle: "",
            canEdit: false,
            isClick: false,
            isChecked: false,
        };
    }
    componentDidMount() {
        this.loadData()
        this.loadOptionData()
    }
    loadData() {
        const seeks = [{
            WhereItems: [{
                FieldName: "#flowType",
                Operator: "=",
                FieldValues: '' + this.state.range,
            }],
            RelationSign: "AND"
        }];
        let daoName2 = daoName
        let sorter = []
        if (this.state.range === "firstdone") {
            daoName2 = "CompClieDiviFlow2ViewApp"
            sorter = {
                field: 'CREATETIME',
                order: 'descend'
            }
        }
        if (this.state.range === "firstall") {
            sorter = {
                field: 'CREATETIME',
                order: 'descend'
            }
        }
        this.props.dispatch({
            type: `${daoName}/fetch`,
            payload: { daoName: daoName2, page: 1, pageSize: 50, seeks, sorter }
        });

    }
    searchData() {
        let sort = {
            field: 'OPDT',
            order: 'descend'
        }
        const form = this.refs.searchForm.getForm()
        form.validateFields((err, values) => {
            const cunm = values.CUNM

            if (!err) {
                compDiviService.GetCompIsDivi({ cunm, divi: '1' }
                ).then(function (data) {
                    if (data === 'N') {
                        message.error("客户为新客户，请按照新客户申请！")
                        return
                    } else if (data === 'err') {
                        message.error("该客户在系统中不存在,或者该客户没开户信息！")
                        return
                    } else {
                        const seeks = [{
                            WhereItems: [{
                                FieldName: "CUNM",
                                Operator: "=",
                                FieldValues: cunm,
                            }, {
                                FieldName: "ISDIVI",
                                Operator: "=",
                                FieldValues: '1',
                            }],
                            RelationSign: "AND"
                        }];

                        this.props.dispatch({
                            type: `CompAccoFlow/fetch`,
                            payload: { daoName: "CompAccoFlow", page: 1, pageSize: 50, sorter: sort, seeks, cunm }
                        });
                        this.props.dispatch({
                            type: `CompAccoFlow2/fetch`,
                            payload: { daoName: "CompAccoFlow2", page: 1, pageSize: 999999999, sorter: sort, seeks, cunm }
                        });
                    }
                }.bind(this)).catch(function (ex) {
                    console.log('请求出错', ex)
                });

            }
        })
    }
    loadOptionData() {
        let options = []
        controls.map(c => {
            if (c.fetch) {
                let f = c.fetch;
                if (c.type === 'cascader-select') {
                    f.isCascader = true;
                }
                if (c.type !== 'search') {
                    options.push(f);
                }
            }
        })
        if (daoName && options.length > 0) {
            this.props.dispatch({ type: `${daoName}/fetchOptions`, payload: { options } });
        }
    }
    showModelHandler(isAdd) {
        let key = null
        if (!isAdd) {
            const len = this.props.selectedRowKeys.length;
            if (len === 0) {
                message.info('请选择要修改的认定关系！', 5);
                return;
            }
            key = this.props.selectedRowKeys[len - 1]
        }
        this.props.dispatch({
            type: `${daoName}/openEdit`,
            payload: { key }
        });
    }
    /**
  * 导入
  * 下载导入模板
  */
    //===============================================
    showImportHandler() {
        this.props.dispatch({
            type: `${daoName}_DataImport/setDisplay`,
            payload: { display: true },
        });
    };
    DownTmportHandler() {
        window.open(xlsxTmp)
    };
    //===============================================
    deleteHandler() {
        const keys = this.props.selectedRowKeys;
        const len = keys.length;
        if (len === 0) {
            message.info('请选择要删除的认定关系！', 5);
            return;
        }
        Modal.confirm({
            title: '提示',
            content: `你确认要删除选中的${len}条认定关系吗？`,
            okText: '删除',
            cancelText: '取消',
            onOk: () => {
                this.props.dispatch({
                    type: `${daoName}/remove`,
                    payload: { daoName, keys },
                });
            }
        });
    }
    edidOkHandler() {
        if (this.props.list2.length <= 0) {
            message.info('请搜索客户信息！', 5);
            return
        }
        const form1 = this.refs.searchForm.getForm()
        const form = this.refs.diviForm.getForm()
        let CUNM, YWLX
        form1.validateFields((err, values) => {
            if (!err) {
                CUNM = values.CUNM
                YWLX = values.YWLX
            }
        })
        if (!CUNM) {
            return
        }
        const keys = this.props.selectedRowKeys2
        if (keys.length === 0 && !this.state.isChecked) {
            message.info('请选择要认定的账户或者一键全选！', 5);
            return
        }
        form.validateFields((err, values) => {
            if (!err) {
                let t = `${daoName}/submitData`
                controls.map(c => {
                    if (c.type === 'cascader-select') {
                        let vs = values[c.name];
                        if (vs.length > 0) {
                            values[c.name] = vs[vs.length - 1];
                        } else {
                            values[c.name] = null;
                        }
                    }
                    if (c.dataType === "number") {
                        values[c.name] = Number(values[c.name])
                    } else if (c.dataType === "date" || c.dataType === "datetime") {
                        const date = !values[c.name] ? null : new Date(values[c.name])
                        values[c.name] = date ? new Date(date.getFullYear(), date.getMonth(), date.getDate(), 8, 0, 0) : null
                    } else {
                        values[c.name] = values[c.name] === undefined ? null : values[c.name]
                    }
                    if (c.multiple || c.type === 'checkbox-group') {
                        values[c.name] = values[c.name].join(',');
                    }
                })
                values.UID = this.props.userID
                values.CUNM = CUNM
                values.YWLX = YWLX
                values.EMNO1 = this.props.UserNo
                let datas = []
                if (this.state.isChecked) {
                    const list3 = this.props.list3
                    datas = list3.map(k => { return { ...values, ACID: k.ID } })
                } else {
                    datas = keys.map(k => { return { ...values, ACID: k } })
                }
                this.state.dataChange = true;
                this.props.dispatch({
                    type: t,
                    payload: { daoName, datas },
                })
                this.props.dispatch({
                    type: `CompAccoFlow/init`,
                    payload: {},
                })
                this.props.dispatch({
                    type: `CompAccoFlow/setSelectedRowKeys`,
                    payload: { selectedRowKeys2: [] }
                });
            }
        });
    };
    hideEditHandler() {
        const form = this.refs.diviForm.getForm();
        form.resetFields();
        const form2 = this.refs.searchForm.getForm()
        form2.resetFields();
        if (this.state.dataChange) {
            this.props.dispatch({
                type: `${daoName}/reload`,
                payload: { daoName },
            });
            this.state.dataChange = false;
        }
        this.state.cunm = ""
        this.props.dispatch({
            type: `${daoName}/hideEdit`
        });
        this.props.dispatch({
            type: `CompAccoFlow/clearList`,
            payload: { list: [] },
        });
        this.state.isChecked = false

    };
    //延时一秒 设置isClick为false
    enableButton() {
        const that = this
        setTimeout(function () {
            that.setState({ isClick: false })
        }, 1000);
    }
    // batchSubmitHandler(bType) {
    //     if (this.state.isClick) {
    //         return
    //     }
    //     this.setState({ isClick: true })
    //     const keys = this.props.selectedRowKeys;
    //     const len = keys.length;
    //     if (len === 0) {
    //         message.info('请选择要提交的认定关系！', 5);
    //         this.enableButton()
    //         return;
    //     }
    //     const list = this.props.list
    //     let runIDs = []
    //     let isOK = true
    //     list.map(row => {
    //         if (keys.find(key => row.ID === key)) {
    //             if (!row.FRID) {
    //                 isOK = false
    //             }
    //             runIDs.push(row.FRID)
    //         }
    //     })
    //     if (!isOK) {
    //         message.info('要提交的认定关系存在校验错误，请修改！', 5);
    //         this.enableButton()
    //         return;
    //     }
    //     bType = "agree"
    //     this.props.dispatch({
    //         type: `${daoName}/flowBatchSubmit`,
    //         payload: { runIDs, userID: this.props.userID, desc: "", bType },
    //     });
    //     this.cancelHandler()
    //     this.enableButton()
    // }
    batchSubmitHandler(bType) {
        if (this.state.isClick) {
            return
        }
        this.setState({ isClick: true })
        const keys = this.props.selectedRowKeys;
        const len = keys.length;
        if (len === 0) {
            message.info('请选择要提交的认定关系！', 5);
            this.enableButton()
            return;
        }
        const list = this.props.list
        let runIDs = []
        let isOK = true
        list.map(row => {
            if (keys.find(key => row.ID === key)) {
                if (!row.FRID) {
                    isOK = false
                }
                runIDs.push(row.FRID)
            }
        })
        if (!isOK) {
            message.info('要提交的认定关系存在校验错误，请修改！', 5);
            this.enableButton()
            return;
        }
        bType = "agree"
        let ishld = 0
        if (list[0].step === 4) {
            Modal.confirm({
                title: '提示',
                content: `请确认是否是亿元客户且需要行领导进行审批？`,
                okText: '需要',
                cancelText: '不需要',
                onOk: () => {
                    ishld = 1
                    this.props.dispatch({
                        type: `${daoName}/flowBatchSubmit`,
                        payload: { runIDs, userID: this.props.userID, desc: "", bType, ishld },
                    });
                    this.cancelHandler()
                    this.enableButton()
                },
                onCancel: () => {
                    ishld = 0
                    this.props.dispatch({
                        type: `${daoName}/flowBatchSubmit`,
                        payload: { runIDs, userID: this.props.userID, desc: "", bType, ishld },
                    });
                    this.cancelHandler()
                    this.enableButton()
                }
            });
        } else {
            ishld = 0
            this.props.dispatch({
                type: `${daoName}/flowBatchSubmit`,
                payload: { runIDs, userID: this.props.userID, desc: "", bType, ishld },
            });
            this.cancelHandler()
            this.enableButton()
        }
    }

    submitHandler(bType) {
        const { runID } = this.props.flowRunInfo
        bType = "agree"
        this.props.dispatch({
            type: `${daoName}/flowSubmit`,
            payload: { runID, userID: this.props.userID, desc: "", bType },
        });
        this.cancelHandler()
    }
    setExecutorHandler() {
        const { runID, currStep } = this.props.flowRunInfo
        const { checkVals } = this.state
        if (checkVals === "") {
            message.info("请您选择办理人！", 5)
        }
        this.props.dispatch({
            type: `${daoName}/setFolwExecutor`,
            payload: { runID, stepID: currStep, userIDstr: checkVals },
        });
    };
    sendBackHandler(bType) {
        const { runID, currStep } = this.props.flowRunInfo
        const { text } = this.state
        if (text === "") {
            message.info("请您填写退回意见！", 5)
            return
        }
        let bStep = 1
        let ts = "你确认要退回申请人吗"
        if (bType === "backPrev") {
            bStep = currStep - 1
            ts = "你确认要退回上一步吗"
        }
        Modal.confirm({
            title: '提示',
            content: ts,
            okText: '退回',
            cancelText: '取消',
            onOk: () => {
                this.props.dispatch({
                    type: `${daoName}/flowSendBack`,
                    payload: { runID, userID: this.props.userID, backStepID: bStep, desc: text },
                });
            }
        });
    }
    abortHandler() {
        if (this.state.isClick) {
            return
        }
        this.setState({ isClick: true })
        const keys = this.props.selectedRowKeys;
        const len = keys.length;
        if (len === 0) {
            message.info('请选择要中止的认定关系！', 5);
            this.enableButton()
            return;
        }
        const list = this.props.list
        let runIDs = []
        let isOK = true
        list.map(row => {
            if (keys.find(key => row.ID === key)) {
                if (!row.FRID) {
                    isOK = false
                }
                runIDs.push(row.FRID)
            }
        })
        Modal.confirm({
            title: '提示',
            content: `你确认要中止此流程吗？`,
            okText: '中止',
            cancelText: '取消',
            onOk: () => {
                this.props.dispatch({
                    type: `${daoName}/flowAbort`,
                    payload: { runIDs },
                });
            }
        });
        this.enableButton()
    }
    cancelHandler() {
        this.props.dispatch({
            type: `${daoName}/setFrid`,
            payload: { frid: 0 },
        });
    }
    doFlowHandler() {
        const { selectedRowKeys } = this.props
        if (selectedRowKeys.length === 0) {
            message.info("请选择要办理流程！", 5)
            return
        }
        const frid = selectedRowKeys[0]
        this.props.dispatch({
            type: `${daoName}/fetchFlowRunInfo`,
            payload: { runID: frid },
        });
    }
    rangeChangeHandler(e) {
        this.state.range = e.key
        this.loadData()
    }
    showStepHandler() {
        const len = this.props.selectedRowKeys.length;
        if (len === 0) {
            message.info('请选择要修改的认定关系！', 5);
            return;
        }
        const key = this.props.selectedRowKeys[len - 1]
        const list = this.props.list
        const index = list.findIndex(v => v.ID === key)
        const runID = list[index].FRID
        // console.log(list[index])
        if (!runID) {
            message.info('选择的认定关系存在校验错误，请修改！', 5);
            return;
        }
        this.state.stepTitle = `${list[index].CUNM}(${list[index].ACNO}-${list[index].BANO})`
        this.props.dispatch({
            type: `${daoName}/fetchFlowRunInfo`,
            payload: { runID }
        });
    }
    hideStepHandler() {
        this.props.dispatch({
            type: `${daoName}/hideStep`,
            payload: {}
        });
    }
    onSelectChange(newList, delKeys) {
        let canEdit = false
        const oldKeys = this.props.selectedRowKeys;
        let keys = []
        oldKeys.forEach(key => {
            let isFind = false
            if (delKeys.find(key2 => key2 === key)) {
                isFind = true
            }
            if (!isFind) {
                keys.push(key)
            }
        })
        newList.forEach(row => {
            keys.push(row.ID)
        });
        const len = keys.length;
        if (len > 0) {
            const list = this.props.list
            let isOK = true
            list.map(row => {
                if (keys.find(key => row.ID === key)) {
                    if (row.step !== 1) {
                        isOK = false
                    }
                }
            })
            if (isOK) {
                canEdit = true
            }
        }
        this.setState({ canEdit })
    }
    acnoChangeHandler(e) {
        const acno = e.target.value
        this.state.acno = acno
    }
    banoChangeHandler(e) {
        const bano = e.target.value
        const acno = this.state.acno
        if (acno && acno != "" && bano && bano != "") {
            this.props.dispatch({
                type: `${daoName}/fetchAcno`,
                payload: { acno, bano }
            });
        }
    }
    renderStep() {
        const { flowRunInfo } = this.props
        const steps = flowRunInfo.stepList.map(s => {
            let desc = "未开始"
            let iszz = false
            if (flowRunInfo.state === '2' && flowRunInfo.currStep === s.id) {
                desc = "已中止"
                iszz = true
            } else if (s.state === '1') {
                desc = "办理中..."
            } else if (s.state === '2') {
                desc = "已办理"
            }
            let content = []
            s.executors.map(e => {
                let color = ""
                if (e.desc === "待办..." || e.desc === "未办") {
                    color = "gray"
                } else if (e.desc.substring(0, 2) === "中止" || e.desc === "管理员强制提交") {
                    color = "#FA541C"
                } else {
                    color = "#0D993A"
                }
                let c = <div key={e.id} ><span>{`${e.name}(${e.department})：`}</span> <br />
                    <span style={{ color: color }}>{e.desc}
                    </span>
                </div>
                content.push(c)
            })
            // const content = s.executors.map(e => <div key={e.id} ><span>{`${e.name}(${e.department})：`}</span> <br/>

            {/* <span style={{ color: e.desc != "在办..." ? desc === "已中止" ? "#FA541C" : "#0D993A" : "gray" }}>{e.desc}</span></div>)
            const descTag = <div style={{ maxHeight: "200px", overflow: "auto" }}>{content}</div>
            return <Step key={s.id} title={s.name + `【` + desc + `】`} description={descTag} /> */}
            // <span style={{ color: e.desc != "待办..." && e.desc !== "未办" ? desc === "已中止" || e.desc === "管理员强制提交" ? "#FA541C" : "#0D993A" : "gray" }}>{iszz===false ? e.desc:"中止"}</span></div>)
            const descTag = <div style={{ maxHeight: "200px", overflow: "auto" }}>{content}</div>
            return <Step key={s.id} title={s.name + `【` + desc + `】`} description={descTag} />
        })
        let status = "process"
        if (flowRunInfo.state === "1") {
            status = "finish"
        } else if (flowRunInfo.state === "2") {
            status = "error"
        } else {
            const step = flowRunInfo.stepList[flowRunInfo.currStep - 1]
            if (step.appointer && step.appointer.length > 0 && step.executors.length == 0) {
                status = "wait"
            }
        }
        const current = flowRunInfo.currStep - 1
        return <Steps direction="vertical" current={current} status={status}>{steps}</Steps>
    }
    onSelectChange1(checkedValues) {
        if (checkedValues.length > 0) {
            this.setState({ isChecked: true })
        } else {
            this.setState({ isChecked: false })
        }
    }
    renderList() {
        let { permID, showStep, showEdit, record, userID, userName, pOrgID, selectedRowKeys } = this.props
        const { range, canEdit, isClick } = this.state
        const attachP = {
            UID: '' + userID
        }
        record.EMNO1 = userName
        const menu = <Menu onClick={this.rangeChangeHandler.bind(this)}>
            <Menu.Item key="firstdoing">在办</Menu.Item>
            <Menu.Item key="firstdone">已办</Menu.Item>
            <Menu.Item key="firstall">全部</Menu.Item>
        </Menu>
        const title = <div>
            <p>存款、结构性存款、贷款、委托贷款：填写账号，子账号，没有子账号则为空或者00000;</p>
            <p>直贴、保函、信用证、保理、黄金租赁：账号处填写借据号，子账号无需填写;</p>
            <p>银承：账号处填写票据号，子账号无需填写。</p>
        </div>
        const butts = <ButtonGroup style={{ zIndex: 0 }}>
            <Dropdown overlay={menu} trigger={['click']}>
                <Button type="ghost" style={{ margin: 5 }}>
                    {range === "firstdoing" ? "在办" : range === "firstdone" ? "已办" : "全部"}<Icon type="down" />
                </Button>
            </Dropdown>
            {range === "firstdoing" && pOrgID !== 61 ? <Button onClick={this.showModelHandler.bind(this, true)}>新增</Button> : null}
            {/* {range === "firstdoing" && canEdit ? <Button onClick={this.showModelHandler.bind(this, false)}>修改</Button> : null} */}
            {range === "firstdoing" && canEdit ? <Button onClick={this.deleteHandler.bind(this)}>删除</Button> : null}
            {range === "firstdoing" && pOrgID === 61 ?
                <Button onClick={this.showImportHandler.bind(this)}>导入</Button>
                : null}
            {range === "firstdoing" && pOrgID === 61 ? <Button onClick={this.DownTmportHandler.bind(this)}>下载导入模板</Button> : null}
            <Button onClick={this.showStepHandler.bind(this)}>查看进度</Button>
            {range === "firstdoing" ? <Button onClick={this.batchSubmitHandler.bind(this)} disabled={isClick}>提交</Button> : null}
            {/*  {range === "firstdoing" && selectedRowKeys.length > 0 && !canEdit ? <Button onClick={this.abortHandler.bind(this)} disabled={isClick}>中止</Button> : null} */}
        </ButtonGroup>
        const controls2 = [
            // { name: 'YWLX', required: true, type: 'select', label: '业务类型', grid: 8 / 24, data: ['存款', '结构性存款', '贷款', '直贴', '银承', '保函', '信用证', '保理', '黄金租赁', '委托贷款'], layout: { labelSpan: 8, wrapperSpan: 16 } },
            // { name: 'ACNO', required: false, type: 'text', label: '账号', dataType: "string", grid: 12 / 24, layout: { labelSpan: 8, wrapperSpan: 16 }, placeholder: '请输入完整的对公账号...' },
            { name: 'CUNM', required: true, type: 'text', label: '客户名称', grid: 12 / 24, layout: { labelSpan: 8, wrapperSpan: 16 }, placeholder: '请输入完整的客户名称...' },
            { name: 'BT', required: false, type: 'button-group', data: [{ value: '1', label: '搜索', onClick: this.searchData.bind(this) }], grid: 4 / 24 },
            { name: "QX", type: "checkbox-group", data: [{ value: '1', label: '一键全选' }], onChange: this.onSelectChange1.bind(this), grid: 6 / 24 },

        ]
        // if (range === "firstdone") {
        //     columns[2].dispaly = true
        // } else {
        //     columns[2].dispaly = false
        // }
        return (
            <div className={styles.normal} style={{ background: '#fff', marginTop: -16, padding: '5px 5px' }}>
                <div>
                    <div className={styles.create}>
                        {butts}
                    </div>
                    <Modal title="认定关系" width={700} visible={showEdit} onOk={this.edidOkHandler.bind(this)} onCancel={this.hideEditHandler.bind(this)} maskClosable={false}
                        footer={[
                            <Button key="close" type="ghost" onClick={this.hideEditHandler.bind(this)}>关闭</Button>,
                            <Button key="submit" type="primary" onClick={this.edidOkHandler.bind(this)}>保存</Button>
                        ]}
                    >
                        <font style={{ color: "red", fontSize: "14px", float: "left", marginLeft: 10 }}>
                            注：1、请输入完整的客户名称，请填写时勿要填错。<br />
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            2、若变更客户的<font style={{ fontWeight: "bold" }}>全部账号</font>可勾选【一键全选】，
                            无需勾选下方列表；若变更<font style={{ fontWeight: "bold" }}>部分账号</font>请勾选下方列表；
                            若既勾选了一键全选和下方列表数据，按变更<font style={{ fontWeight: "bold" }}>全部账号</font>,请谨慎勾选！！！
                        </font>
                        <EditFrom ref="searchForm" daoName="CompAccoFlow" controls={controls2} />
                        <DataTable2 ref="acnoTable" daoName="CompAccoFlow" columns={columns2} controls={controls3} permID={permID} multiSelect={true} canChange={false} canExport={false} height={300} />
                        <EditFrom ref="diviForm" daoName={daoName} controls={controls} record={record} />
                    </Modal>
                    <DataTable ref="diviTable" daoName={daoName} columns={columns} controls={controlsFilter} permID={permID} onSelectChange={this.onSelectChange.bind(this)} multiSelect={true} />
                    <DataImport title="认定关系导入" importName="comp_cile_divi_update" daoName={daoName} keys={["ID"]} importMode="InsertOnly" attachParams={attachP} controls={controlsImp} forbidConvert={true} saveByDao={true} />
                    {showStep ? <Modal title={this.state.stepTitle} width={400} visible={showStep} onCancel={this.hideStepHandler.bind(this)}
                        footer={null}
                    >
                        {this.renderStep()}
                    </Modal> : null}
                </div>
            </div>
        )
    }
    render() {
        controls[0].onBlur = this.acnoChangeHandler.bind(this)
        controls[1].onBlur = this.banoChangeHandler.bind(this)
        return this.renderList()
    }
}

function mapStateToProps(state) {
    const { showEdit, showStep, record, list, selectedRowKeys, keyName, flowRunInfo, frid, accoList } = state[daoName];
    const { record: record2, list: list2, selectedRowKeys: selectedRowKeys2 } = state["CompAccoFlow"];
    const { list: list3 } = state["CompAccoFlow2"];
    const { userID, orgID, pOrgID, popedomTypes, userName, UserNo, RDDate } = state.menus;
    const { display } = state[`${daoName}_DataImport`];
    return {
        loading: state.loading.models[daoName],
        userID, accoList,
        orgID,
        pOrgID, userName, UserNo,
        popedomTypes,
        list,
        list2, RDDate,
        showEdit,
        showStep,
        selectedRowKeys,
        selectedRowKeys2,
        keyName,
        record,
        record2,
        flowRunInfo,
        frid,
        showImport: display, list3

    }
}
CompClieDiviFlow2App = connect(mapStateToProps)(CompClieDiviFlow2App)
export default CompClieDiviFlow2App;
let render = (props) => React.createElement(CompClieDiviFlow2App, props);
let f = new Factory()
f.set("CompClieDiviFlow2App", render)
